<template>
    <div class="content">
        <!-- 首页板块1 公司简介 和新闻 -->
        <div class="item-content">
            <div class="jianjie-content">
                <div class="left-content">
                    <div class="title">公司简介</div>
                    <div class="box">
                        <div class="left">
                            <img src="../assets/home/gsjs1.jpg" alt="">
                        </div>
                        <div class="right">


                            山东三江医疗科技有限公司成立于2006年,自成立以来, 一直致力于中心血站、医院输血科、科研单位等产品的研发、生产和销售,主要产品有:隔水式融浆机、血浆解冻箱、血小板震荡保存箱、血液低温操作台、低温操作混匀仪、血液低温滤白柜、血液低温净化配血台 、医用高频热合机、血液运输箱、冷链无线监控系统、药品冷藏柜等。规格齐全,满足各种规模的用户的需求。目前公司产品全面通过了山东省医疗器械和药品包装检验研究院包括电磁兼容在内的各项检测。经过二十年的研发、磨练、持续改进,我们的产品质量趋于稳定可靠,受到了包括武汉协和医院、华西医科大医院、广州血液中心、深圳市血液中心、北京武警总医院等各地用户的赞誉和肯定。
                            <span @click="gotoAbout()" style="cursor: pointer;">[查看详细]</span>
                        </div>
                    </div>
                </div>
                <div class="right-content">
                    <div class="title">公司新闻</div>
                    <div class="message">
                        <div v-for="(item, i) in newsListData.newslist"
                            @click="goto('/newscontent', item.checkId, item.newsid)">
                            <div v-if="i < 6" class="message-item">{{ item.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item-content">
            <!-- 设备展示 -->
            <div class="shebei ">
                <div class="title">
                    <p>设备展示</p>
                    <p class="btn2">查看更多 +</p>
                </div>
                <div class="box">
                    <div class="message-box" v-for="(item, i) in chanpinData" :key="i"
                        @click="navigateData('/produc', '1', item.record_id)">
                        <div class="message-item">
                            <img v-if="!item.img == ''" :src="base64Img(item.img)" alt="">
                            <p>{{ item.title }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="item-content">
            <!-- 无线设备 -->
            <div class="wifi-shebei">
                <div class="title">
                    物联网解决方案
                </div>
                <div class="box">
                    <img src="../assets/home/index_bj2.png" alt="">
                </div>
            </div>
        </div>


        <div class="item-content">
            <div class="kehu-box">
                <div class="title">
                    <p>我们的客户案例</p>
                </div>
                <div class="box">
                    <div class="kehu-item" v-for="(item, index) in kehuData" :key="index">
                        <img :src="item.img" :alt="item.title">
                        <p>
                            {{ item.title }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="item-content">
            <div class="honor-box">
                <div class="title">荣誉资质</div>
                <div class="box">
                    <el-scrollbar>
                        <div class="scrollbar-flex-content">
                            <div class="item-content" v-for="(item, index) in honorData" :key="index">
                                <img :src="item" alt="">
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getNewsList, getLeftList } from '../api/api/ProducView'
import { base64Img } from '../tools/tools.js'
import { useRouter } from 'vue-router'
// 跳转
const goto = (path, checkData, newsId) => {
    router.push({
        path: path,
        query: {
            checkData: checkData,
            newsId: newsId
        }
    })
}


const router = useRouter()
const newsListData = ref([])
const chanpinData = ref([])
const kehuData = [
    { img: new URL('@/assets/home/1.jpg', import.meta.url).href, title: '中国医科大学附属医院' },
    { img: new URL('@/assets/home/2.jpg', import.meta.url).href, title: '西藏阜康医院' },
    { img: new URL('@/assets/home/3.jpg', import.meta.url).href, title: '西藏自治区血液中心' },
    { img: new URL('@/assets/home/4.jpg', import.meta.url).href, title: '西藏自治区人民医院' },
]

const honorData = [
    new URL('@/assets/home/honor/1.jpg', import.meta.url).href,
    new URL('@/assets/home/honor/2.jpg', import.meta.url).href,
    new URL('@/assets/home/honor/3.jpg', import.meta.url).href,
    new URL('@/assets/home/honor/4.jpg', import.meta.url).href,
    new URL('@/assets/home/honor/5.jpg', import.meta.url).href,
    new URL('@/assets/home/honor/6.jpg', import.meta.url).href,
    new URL('@/assets/home/honor/7.png', import.meta.url).href,
    new URL('@/assets/home/honor/8.png', import.meta.url).href,
    new URL('@/assets/home/honor/9.jpg', import.meta.url).href,
    new URL('@/assets/home/honor/10.jpg', import.meta.url).href
]






const _getNewsList = () => {
    getNewsList('sj1').then((res) => {
        console.log('首页新闻信息', res);
        newsListData.value = res.data
    })
}

const _getLeftList = () => {
    getLeftList().then((res) => {
        console.log('首页产品信息', res);
        chanpinData.value = res.data.data
    })
}

const navigateData = (path, checkId, id) => {
    // 发送查询参数
    router.push({
        path: path,
        query: { checkId: checkId, id: id }
    })
}

const gotoAbout = () => {
    router.push({
        path: '/aboute'
    })
}

onMounted(() => {
    _getNewsList()
    _getLeftList()
});


</script>
<style lang="scss" scoped>
// 取消显示手机端 显示pc端
@media (min-width: 800px) {
    .content {

        .item-content:nth-child(odd) {
            /* 单数盒子颜色 */
            background-color: rgb(252, 252, 252);

        }

        .item-content:nth-child(even) {
            background-color: white;

            /* 偶数盒子颜色 */
        }

        .jianjie-content {
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            width: 1200px;
            margin: 0 auto;

            .left-content {
                width: 780px;
                border-right: 1px solid gainsboro;
                padding-right: 10px;

                .title {
                    padding-left: 10px;
                    font-size: 18px;
                    border-bottom: 2px solid gainsboro;
                    color: rgb(102, 102, 102);
                    font-weight: 700;
                    line-height: 20px;
                }

                .box {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px 4px;
                    font-size: 15px;
                    color: rgb(102, 102, 102);
                    line-height: 22px;

                    img {
                        border: 1px solid gainsboro;
                        padding: 4px;
                        margin: 4px 4px 4px 0;
                        width: 269px;
                        height: 205px;
                    }

                    .right {
                        text-indent: 2em;

                        span {
                            color: orange;
                        }
                    }
                }
            }

            .right-content {
                width: 400px;

                .title {
                    padding-left: 10px;
                    font-size: 18px;
                    border-bottom: 2px solid gainsboro;
                    color: rgb(102, 102, 102);
                    font-weight: 700;
                    line-height: 20px;

                }

                .message-item {
                    line-height: 40px;
                    padding-left: 20px;
                    border-bottom: 1px solid gainsboro;
                    cursor: pointer;
                    white-space: nowrap;
                    /* 不换行 */
                    overflow: hidden;
                    /* 溢出隐藏 */
                    text-overflow: ellipsis;
                    /* 用省略号表示溢出 */
                }

                .message-item:hover {
                    color: orange;
                    border-bottom: 1px solid orange;

                }

            }
        }



        .shebei {
            margin: 0 auto;
            width: 1200px;
            padding: 20px 0;

            .title {
                padding: 20px 0;
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            .box {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                /* 创建4列，每列宽度相等 */
                gap: 10px;

                /* 列间距 */
                .message-box {
                    .message-item {
                        border: 1px solid rgb(238, 238, 238);
                        padding: 10px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        cursor: pointer;

                        img {
                            width: 260px;
                            height: 170px;
                        }

                        p {
                            margin-top: 16px;
                            text-align: center;
                        }
                    }

                }

                .message-box :hover {
                    background-color: rgb(231, 231, 231);
                }
            }
        }

        .wifi-shebei {
            margin: 0 auto;
            width: 1200px;
            padding: 20px 0;

            .title {
                text-align: center;
                font-size: 20px;
                line-height: 60px;
            }
        }


        .kehu-box {
            padding: 20px 0;
            width: 1200px;
            margin: 0 auto;

            .title {
                text-align: center;
                font-size: 20px;
                line-height: 60px;

            }

            .box {
                display: flex;
                justify-content: space-between;

                .kehu-item {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 10px;
                    border: 1px solid gainsboro;

                    img {
                        width: 260px;
                        height: 231px;
                        margin: 10px 0 5px 0;
                        cursor: pointer;
                    }

                    p {
                        text-align: center;
                    }
                }

                .kehu-item:hover {
                    background-color: rgb(247, 247, 247);
                }
            }
        }

        .honor-box {
            padding: 20px 0;
            width: 1200px;
            margin: 0 auto;

            .title {
                text-align: center;
                font-size: 20px;
                line-height: 60px;

            }

            .box {

                .scrollbar-flex-content {
                    display: flex;

                    .item-content {
                        padding: 20px;
                        background-color: rgb(245, 245, 245);
                        margin-right: 20px;
                        border: 1px solid gainsboro;

                        img {
                            width: 170px;
                            height: 211px;
                        }
                    }
                }
            }
        }
    }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {

    .content {

        .item-content {
            .jianjie-content {

                .left-content {
                    .title {
                        line-height: 60px;
                        font-size: 26px;
                        font-weight: 700;
                        text-align: center;
                        border-bottom: 1px solid gainsboro;
                        margin-bottom: 10px;
                    }

                    .box {
                        padding: 10px;

                        .left {
                            img {
                                width: 100%;
                            }
                        }

                        .right {
                            font-size: 20px;
                            line-height: 40px;
                            text-indent: 2em;

                            span {
                                color: orange;
                            }
                        }
                    }
                }

                .right-content {
                    .title {
                        line-height: 60px;
                        font-size: 26px;
                        font-weight: 700;
                        text-align: center;
                        border-bottom: 1px solid gainsboro;
                        margin-bottom: 10px;
                    }

                    .message {
                        width: 100vw;
                        padding: 20px;

                        div {
                            font-size: 20px;
                        }
                    }
                }
            }

            .shebei {
                .title {
                    line-height: 60px;
                    font-size: 26px;
                    font-weight: 700;
                    text-align: center;
                    border-bottom: 1px solid gainsboro;
                    margin-bottom: 10px;

                    .btn2 {
                        display: none;
                    }
                }

                .box {
                    width: calc(100vw - 20px);
                    padding: 0 10px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .message-box {
                        width: calc(50vw - 20px);

                        .message-item {
                            padding: 10px;

                            img {
                                width: calc(100%);
                            }

                            p {
                                text-align: center;
                            }
                        }
                    }
                }

            }

            .wifi-shebei {
                padding: 0 10px;

                .title {
                    line-height: 60px;
                    font-size: 26px;
                    font-weight: 700;
                    text-align: center;
                    border-bottom: 1px solid gainsboro;
                    margin-bottom: 10px;
                }

                .box {
                    img {
                        width: 100%;
                    }
                }
            }

            .kehu-box {
                .title {
                    line-height: 60px;
                    font-size: 26px;
                    font-weight: 700;
                    text-align: center;
                    border-bottom: 1px solid gainsboro;
                    margin-bottom: 10px;
                }

                .box {
                    padding: 0 10px;
                    text-align: center;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    .kehu-item {
                        width: calc(50% - 10px);

                        img {
                            width: 100%;
                            height: 80%;
                        }
                    }
                }
            }

            .honor-box {
                margin-bottom: 10px;

                .title {
                    line-height: 60px;
                    font-size: 26px;
                    font-weight: 700;
                    text-align: center;
                    border-bottom: 1px solid gainsboro;
                    margin-bottom: 10px;
                }

                .box {

                    .scrollbar-flex-content {
                        display: flex;

                        .item-content {
                            padding: 20px;
                            background-color: rgb(245, 245, 245);
                            margin-right: 20px;
                            border: 1px solid gainsboro;

                            img {
                                width: 170px;
                                height: 211px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>